import React, { Component } from 'react';
import { View, Text, TextInput, TouchableHighlight, Image, NativeModules, NativeEventEmitter, AsyncStorage, DeviceEventEmitter } from 'react-native';
import Icon from '../../src/iconfont/Icon'
import { Button, Card, CardItem, Toast, Root } from 'native-base'

import net from '../../net';
let login_path = '/v1/member/login'

let vm = NativeModules.SYLoginVCViewModel
var nativeBridge = NativeModules.BaseViewModel;




export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            account: '',
            password: ''
        };
    }

    action = () => {
        this.props.navigation.goBack()
    }

    dismissActon = () => {
        if (vm != undefined) {
            vm.dismiss()
        }
    }

    loginBtnAction = () => {
        let { account, password } = this.state
        this.netLogin()
    }

    async netLogin() {
        let { account, password } = this.state
        let res = await net.post(login_path, { account, password })
        let code = res.code
        if (code != 0) {
            Toast.show({ text: res.message, position: 'bottom' })
        } else {
            vm.updateUserInfo(res.data)
            AsyncStorage.setItem('UserInfo', JSON.stringify(res.data)).then(() => {
                vm.dismiss()
                DeviceEventEmitter.emit('LoginSuccess')
            })
        }
    }

    registBtnClick = () => {
        if (vm != undefined) {
            vm.showNavbar()
            vm.pushvc('ZCRegsitVC', { title: '注册' })
        }
    }

    viewTouchAction = () => {
        this.refs['usernmTF'].blur()
        this.refs['passwdTF'].blur()
    }

    usernameOnChange = (e) => {
        let { text } = e.nativeEvent
        this.setState({ account: text })
    }

    passwordOnChange = (e) => {
        let { text } = e.nativeEvent
        this.setState({ password: text })
    }

    render() {
        return (
            <Root>
                <TouchableHighlight activeOpacity={1} onPress={this.viewTouchAction} style={{ flex: 1, backgroundColor: '#ffffff' }} underlayColor={'rgba(255,255,255)'}>
                    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                        <Button onPress={this.dismissActon} style={{ position: 'absolute', left: 12, top: 44, }} transparent={true}>
                            <Icon name='tupianguanbix' size={30} />
                        </Button>

                        <Image source={{ uri: 'Logo' }} style={{ width: 92, height: 92, marginBottom: 40 }} />

                        <Card style={{ width: '90%', paddingTop: 12 }}>
                            <CardItem bordered>
                                <Text style={{ width: 50, color: '#333333', marginRight: 5 }}>用户名</Text>
                                <TextInput ref='usernmTF' onChange={this.usernameOnChange} placeholder='用户名' style={{ flex: 1 }} />
                            </CardItem>
                            <CardItem bordered style={{ paddingBottom: 12 }}>
                                <Text style={{ width: 50, color: '#333333', marginRight: 5 }}>密   码</Text>
                                <TextInput ref='passwdTF' onChange={this.passwordOnChange} placeholder='密码' secureTextEntry style={{ flex: 1 }} clearButtonMode='while-editing' />
                            </CardItem>
                        </Card>
                        <View style={{ marginTop: 10, width: '90%' }}>
                            <Button onPress={this.loginBtnAction} full style={{ backgroundColor: 'red' }}>
                                <Text style={{ textAlign: 'center', color: '#ffffff' }}>登录</Text>
                            </Button>
                        </View>
                        <Button transparent style={{ marginTop: 20 }} onPress={this.registBtnClick}>
                            <Text style={{ color: '#0e81ff', fontSize: 13 }}>注册</Text>
                        </Button>
                    </View>
                </TouchableHighlight>
            </Root>
        );
    }
}